<template>
  <div class="app-container">
    <div class="u-flex u-flex-wrap">
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12">商品状态：</div>
        <el-select v-model="queryData.status" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="已上架" :value="1"></el-option>
          <el-option label="已下架" :value="0"></el-option>
        </el-select>
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12" style="line-height: 30px; width: 100px">
          商品名称：
        </div>
        <el-input v-model="queryData.name" class="select-input1" placeholder="商品名称" clearable />
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <el-button type="primary" @click="addProduct">新增</el-button>
      </div>
			<div class="u-flex u-m-l-20 u-m-b-20">
        <el-button type="primary" @click="hanleSearch('')">查询</el-button>
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <el-button @click="hanleSearch('reset')">重置</el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column label="商品信息" fixed="left" min-width="200">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <img
              style="width: 50px; margin-right: 10px"
              :src="scope.row.image"
              alt=""
            />{{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格（元）" min-width="300" />
      <el-table-column label="商品状态" min-width="300">
        <template slot-scope="scope">
          <div :class="scope.row.status === 1 ? 'success' : 'Warning'">{{ scope.row.status === 1 ? "已上架" : "已下架" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="description" :show-overflow-tooltip="true" label="商品描述" min-width="300" />
      <el-table-column label="操作" fixed="right" min-width="300">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleEdit(scope.row.goodsId)">
            编辑
          </el-button>
          <el-button type="text" size="mini" @click="changeStatus(scope.row)">
            {{ scope.row.status === 1 ? "下架" : "上架" }}
          </el-button>
          <el-button type="text" size="mini" @click="handleDelete(scope.row.goodsId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="u-flex u-row-center u-m-t-10">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { goodsPage, goodsStatusUpdate, deleteGoods } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      loading: false,
      currentPage: 1,
      queryData: {
        status: "", //	商品状态 0 下架 1 上架
        name: "",
      },
      pagination: {
        pageSize: 1,
        total: 1,
      }
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // currentPage: {
    //   get() {
    //     return this.queryData.pageIndex + 1;
    //   },
    //   set() {},
    // },
  },
  methods: {
    getList() {
      this.loading = true
      goodsPage(this.queryData).then((res) => {
        this.list = res.data;
        this.loading = false;
      });
    },
    hanleSearch(reset) {
			if (reset) {
				this.queryData.name = ''
				this.queryData.status = ''
        // this.currentPage = 1
        // this.pagination.pageIndex = 1
			}
      this.getList();
    },
    handleSizeChange(val) {
      // this.queryData.pageIndex = val - 1
      // this.getList()
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val - 1;
      this.getList();
    },
    handleEdit(id) {
      this.$router.push(`/permission/page/editProduct?goodsId=${id}`)
    },
    handleDelete(goodsId) {
      this.$confirm("确认要删除该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.confirmDelete(goodsId);
        })
        .catch((err) => {
					console.log('err', err)
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    confirmDelete(goodsId) {
      deleteGoods(goodsId).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.getList();
      });
    },
    formatter: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter1: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter2: function (row) {
      return this.$moment(row.createdTime).format("YYYY/MM/DD");
    },
    addProduct() {
      this.$router.push("/permission/page/addProduct");
    },
		changeStatus(row) {
			let params = {
				goodsId: row.goodsId,
				status: 1
			}
			if (row.status + '' === '1') {
				params.status = 0
			}
			goodsStatusUpdate(params).then(() =>{
				this.getList()
			})
		}
  },
}
</script>
<style scoped>
.success {
	color: #67C23A;
}
.Warning {
	color: #E6A23C;
}
</style>
